<template>
  <div class="index">

    <!-- 头部区域 --> 
     <el-card class="operate-top-card" >  <!-- shadow="never" -->
        <i class="el-icon-s-order" style="font-size:18px;margin-right:3px"></i>
        <span>商品分类列表</span> 
        <el-button class="btn-add" type="primary"  size="mini" @click="$router.push('/pm/productCateAdd')">添加</el-button>
     </el-card>

     <!-- 内容区域 -->
     <el-card class="table-container">
          <el-table 
           :data="listData" 
            border   
            v-loading="listLoading"
            style="width: 100%" >
            <el-table-column  align="center"   label="编号"  width="80"> 
                <template slot-scope="scope">
                  {{scope.$index + 1 + (pageNum - 1) * pageSize }}
                </template>
            </el-table-column>
            <el-table-column  prop="name"  align="center"  label="分类名称"  width="120">  </el-table-column>
            <el-table-column  prop="" align="center"  label="级别" width="80"> 
                <template slot-scope="scope">
                   {{scope.row.parent_id | levelFilter}}
               </template> 
            </el-table-column>

            <el-table-column  prop="product_unit" label="数量单位" align="center" width="80">  </el-table-column>
            <el-table-column  label="移动端显示" align="center" width="150"> 
               <template slot-scope="scope">
                  <el-switch 
                    v-model="scope.row.nav_status" 
                    :active-value="1" 
                    :inactive-value="0"
                    @change="handleNavStatusChange(scope.$index,scope.row)">
                  </el-switch>
               </template>
            </el-table-column>

            <el-table-column  label="是否启用" align="center" width="150"> 
               <template slot-scope="scope">
                  <el-switch 
                    v-model="scope.row.show_status" 
                    :active-value="1" 
                    :inactive-value="0"
                    @change="handleShowStatusChange(scope.$index,scope.row)">
                  </el-switch>
               </template>
            </el-table-column>

            <el-table-column  prop="sort" label="排序" align="center" width="150">  </el-table-column>
            <el-table-column   label="设置" align="center">
               <template slot-scope="scope">
                   <el-button 
                      size="mini"
                      :disabled="scope.row.parent_id !== 0"
                      @click="handleShowNextLevel(scope.$index,scope.row)"
                    >查看下一级
                   </el-button>
               </template>
            </el-table-column>

             <el-table-column   label="操作" align="center" width="200">
               <template slot-scope="scope">
                  <el-button 
                    size="mini"
                    @click="handleUpdate(scope.$index,scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index,scope.row)"
                  >删除</el-button>
               </template>
            </el-table-column> 
          </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
          

     </el-card>

  </div>
</template>

<script> 
  
  import {getCategory,updateCategory,delCategory} from '@/api/categoryApi'
export default { 
  name: 'index',
  data() {
    return {
      listData: [],
      listLoading:false,
      pageNum:1,
      pageSize: 5,
      parentId:0,
      total:0
    }
  },
  watch: {
    $route: {
      immediate: true, // 一旦监听到路由的变化立即执行
      handler(router) {
        // console.log(router);
        this.resetParentId();
        this.getList();
      }
    }
  }, 
  created(){ 
    this.resetParentId();  
    this.getList();
  },
  
  methods:{ 
    // 0 重新设置 parent_id 
    resetParentId(){
      this.pageNum = 1;
      if(this.$route.query.parentId !== undefined){
        this.parentId = this.$route.query.parentId
      }else{
        this.parentId = 0
      }
    }, 
    // 1 获取列表数据
    async getList(){
      this.listLoading = true;
      // 请求网络数据
      let response = await getCategory(this.parentId,this.pageNum,this.pageSize);
      if(response.status === 1){
          this.listLoading = false;   
          this.listData = response.data.category_list;
          this.total = response.data.category_count; 
      }else{
         this.$message.error('数据请求失败...')
      }
      
    }, 
    // 2 改变每页显示条数
    handleSizeChange(val){
      this.pageNum = 1;
      this.pageSize = val;
      // 重新加载数据
      this.getList();
    },
    // 3 当前页码发生改变
    handleCurrentChange(val){
       this.pageNum = val;
        // 重新加载数据
      this.getList();
    },
    // 4 是否启用 该分类
    handleShowStatusChange(index,row){
      updateCategory({
        id:row.id,
        show_status:row.show_status
      }).then(res=>{
        if(res.status === 1){
          this.$message.success(res.msg);
        }else{ 
          row.show_status = row.show_status == 1 ? 0 : 1;
          this.$message.error(res.msg);
        }
      })
    },
    // 5 移动端是否显示
    handleNavStatusChange(index,row){
      updateCategory({
        id:row.id,
        nav_status:row.nav_status
      }).then(res=>{
        if(res.status === 1){
          this.$message.success(res.msg)
        }else{ 
          row.nav_status = row.nav_status == 1 ? 0 : 1;
          this.$message.error(res.msg)
        }
      })
    },
    // 6 查看下一级
    handleShowNextLevel(index,row){
      this.$router.push({
        path:'productCategory',
        query:{
          parentId:row.id
        }
      })
    },
    // 7 删除一条记录
    handleDelete(index,row){
      this.$confirm('确定要删除该分类及其子分类?','提示',{
        type:'warning'
      }).then(res=>{
        delCategory(row.id).then(res=>{
          if(res.status === 1){
            this.$message.success(res.msg)
            // 重新请求数据
            this.getList()
          }else{
            this.$message.error(res.msg)
          } 
        }) 
      }).catch(err=>{
        this.$message.info('已取消删除')
      })
 
       
    },

    // 8 编辑
    handleUpdate(index,row){
      this.$router.push({
        path:'/pm/productCateUpdate',
        query:{
          id:row.id
        }
      })
    }
  },
  filters:{
    levelFilter(value){ 
      if(value == 0){
        return '一级'
      }else{
        return '二级'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  
</style>
